<template>
  <div class="Login">
    <NavBer :navtitle="navtitle"></NavBer>
    <Prompt v-if="promptStute" :prompt="prompt"></Prompt>
    <div class="logo">
      <img src="../../assets/logo.png" alt="logo">
    </div>
    <div class="from">
      <div class="input">
        <img class="left_icon" v-bind="{src: phone.length<=0 ? icon[0] : active_icon[0]}" alt="手机号码">
        <input type="number" @blur="change($event,'phone')" @focus="change($event,'phone')" oninput="if(value.length>11)value=value.slice(0,11)" placeholder="请输入手机号码" v-model="phone">
        <div class="right_icon">
          <div class="block_icon" v-if="loginInfoList.length>0">
            <img class="fill" src="../../assets/right-fill.png" alt="下展" @click="list">
          </div>
        </div>
        <div class="right_icon" v-if="phone.length>0" @click="clear('phone')">
          <div class="clear_icon">
            <img src="../../assets/clear-icon.png" alt="清空" v-if="phoneFocusStute">
          </div>
        </div>
        <div class="list" v-if="listStute" @click.stop="list">
          <p v-for="(item,index) in loginInfoList" :key="index" @click="add(index)">{{item.loginName}}</p>
        </div>
      </div>
      <div class="input">
        <img class="left_icon" v-bind="{src: passWord.length<=0 ? icon[1] : active_icon[1]}" alt="密码">
        <input @blur="change($event,'passWord')" @focus="change($event,'passWord')" maxlength="15" v-bind="{ type: cutStute ? 'password' : 'text' }" placeholder="请输入密码" v-model="passWord">
        <div class="right_icon eyes_icon">
          <div class="block_icon">
            <img src="../../assets/close-eyes.png" v-if="cutStute" style="height: .06rem;" alt="不可看" @click="cut">
            <img src="../../assets/open-eyes.png" v-else-if="!cutStute" style="height: .1rem;" alt="可看" @click="cut">
          </div>
        </div>
        <div class="right_icon" v-if="passWord.length>0" @click="clear('passWord')">
          <div class="clear_icon">
            <img src="../../assets/clear-icon.png" alt="清空" v-if="pwdFocusStute">
          </div>
        </div>
      </div>
    </div>
    <div class="button" v-if="phone.length<11||passWord.length<6">登录</div>
    <div class="button active" v-if="phone.length==11&&passWord.length>=6" @click="register">登录</div>
    <p class="forgetPwd" @click="skipchangePwd">忘记密码</p>
    <p class="immediatelyRegister" @click="skipRegister">
      立即注册
      <img src="../../assets/skip-fill.png" alt="跳转">
    </p>
  </div>
</template>

<script>
import NavBer from '@/components/NavBer.vue'
import Prompt from '@/components/Prompt.vue'
import api from '../../utils/api';
import axios from 'axios';
import store from '../../store.js';
import qs from 'qs';
export default {
  name: 'Enter',
  components: {
    NavBer,
    Prompt
  },
  data () {
    return {
      navtitle: "登录",
      icon: [
        require("../../assets/phone-icon.png"),
        require("../../assets/pwd-icon.png"),
      ],
      active_icon: [
        require("../../assets/phone-active-icon.png"),
        require("../../assets/pwd-active-icon.png"),
      ],
      phone: "18349179063",
      passWord: "yuanbo123",
      listStute: false,
      loginInfoList: [],
      phoneFocusStute: false,
      pwdFocusStute: false,
      cutStute: true,
      prompt: "",
      promptStute: false,
      groupId: "",
      siteid: "",
      merchantId: "",
      storeCustId: "",
      storeId: "",
      loginInfo: {},
    }
  },
  methods: {
    // input 清除
    clear(value){
      this[value] = ""
      this.promptStute = false
    },
    // 获焦、失焦
    change(e,name){
      var type = e.type
      var that = this;
      if(type == "blur"){
        if(name == "phone") {
          that.phoneFocusStute = false;
          var reg=/^1[345678]\d{9}$/;
          if (that.phone == "") {
            that.prompt = "手机号码不能为空"
            that.promptStute = true;
            setTimeout(() => {
              that.promptStute = false;
            },1500)
          }else if (!(reg.test(that.phone))) {
            that.prompt = "手机号码格式错误"
            that.promptStute = true;
            setTimeout(() => {
              that.promptStute = false;
            },1500)
          }
        }else if(name == "passWord") {
          that.pwdFocusStute = false;
          var reg=/^[a-zA-Z0-9]{6,15}$/;
          if (that.passWord == "") {
            that.prompt = "密码不能为空"
            that.promptStute = true;
            setTimeout(() => {
              that.promptStute = false;
            },1500)
          }else if (!(reg.test(that.passWord))) {
            that.prompt = "密码格式错误"
            that.promptStute = true;
            setTimeout(() => {
              that.promptStute = false;
            },1500)
          }
        }
      }else if(type == "focus"){
        if(name == "phone") {
          that.phoneFocusStute = true;
        }else if(name == "passWord") {
          that.pwdFocusStute = true;
        }
      }
    },
    // 密码是否可见
    cut(){
      this.cutStute = !this.cutStute
    },
    // 历史记录显示、隐藏
    list(){
      var that = this;
      that.listStute = !that.listStute
    },
    // 跳转 忘记密码
    skipchangePwd(){
      this.$router.push({path:'/Forget'});
    },
    // 跳转 注册
    skipRegister(){
      this.$router.push({path:'/Register'});
    },
    // 获取本地存储
    getLoginInfoList() {
      var that = this;
      let loginInfoList;
      if(localStorage.getItem('loginInfoList')){
        loginInfoList = JSON.parse(localStorage.getItem('loginInfoList'))
      }else {
        loginInfoList = []
      }
      that.loginInfoList = loginInfoList
    },
    // 设置本地储存
    setLoginInfoList() {
      var that = this;
      let getLoginInfoList = that.loginInfoList;
      for(let i = 0; i < getLoginInfoList.length; i++){
        if(getLoginInfoList[i].loginName === that.phone){
          getLoginInfoList.splice(i,1);
          break;
        }
      }
      getLoginInfoList.unshift({
        loginName: that.phone,
        password: that.passWord
      })
      if(getLoginInfoList.length > 10) {
        getLoginInfoList.splice(10,getLoginInfoList.length - 10)
      }
      that.loginInfoList = getLoginInfoList;
      localStorage.setItem('loginInfoList', JSON.stringify(getLoginInfoList));
    },
    // 添加账号、密码
    add(i){
      var that = this;
      var get = JSON.parse(localStorage.getItem('loginInfoList'))
      if(that.loginInfoList[i].loginName == get[i].loginName){
        that.phone = get[i].loginName;
        that.passWord = get[i].password;
      }
    },
    // 首页接口参数
    getByUserId(userId){
        var that = this;
        var headers = {
            'token' : store.state.token,
            'userId' : userId
        }
        axios({
          url: 'https://web-gateway.newbeescm.com/b2b-app-web/app/merchant/getByUserId/'+userId,
          method: 'post',
          headers,
        }).then(res => {
            if(res.data.status.statusCode === 0){
              that.groupId = res.data.result.groupId;
              that.siteid = res.data.result.stationId;
              that.merchantId = res.data.result.merchantId;
              that.ByGroupId(userId,res.data.result.id,headers)
            }else{
              console.log(res)
            }
        }).catch(err => {
            console.log(err)
        })
    },
    // 首页接口参数
    ByGroupId(userId,dealerId,headers){
        var that = this;
        axios({
          url: 'https://web-gateway.newbeescm.com/b2b-app-web/getListOfShopByGroupId/?groupId='+that.groupId,
          method: 'post',
          headers,
        }).then(res=>{
            if(res.data.status.statusCode === 0){
              that.storeCustId = res.data.result.items[0].id;
              that.storeId = res.data.result.items[0].storeId;
              var provId = res.data.result.items[0].province
              var cityId = res.data.result.items[0].city
              var countyId = res.data.result.items[0].county
              var streetId = res.data.result.items[0].gbCode
              var loginInfo = {
                merchantId: that.merchantId,
                stationId: that.siteid,
                storeCustId: that.storeCustId,
                storeId: that.storeId,
                userId: userId,
                dealerId: dealerId,
                provId: provId,
                cityId: cityId,
                countyId: countyId,
                streetId: streetId,
              }
              that.loginInfo = loginInfo;
              store.commit("setLoginInfo", JSON.stringify(loginInfo));
              localStorage.setItem('loginInfo', JSON.stringify(loginInfo));
              that.$router.push({path: that.$route.query.name})
            }else{
                console.log(res)
            }
        }).catch(err => {
            console.log(err)
        })
    },
    // 登录
    register(){
      var that = this;
      api.post("/user/login",qs.stringify({loginName: that.phone,password: that.passWord}),"post")
        .then(res=>{
          if(res.data.status.statusCode === 0){
            that.setLoginInfoList();
            store.commit("setToken", res.data.result.token);
            localStorage.setItem('token', res.data.result.token);
            store.commit("setUserInfo", JSON.stringify(res.data.result));
            localStorage.setItem('userInfo', JSON.stringify(res.data.result));
            console.log(that.$store.state.token)
            that.prompt = "登录成功"
            that.promptStute = true;
            setTimeout(() => {
              that.promptStute = false;
            },1500)
            that.getByUserId(res.data.result.id)
          }else{
            console.log(res)
          }
        })
    },
  },
  created(){
    this.getLoginInfoList()
  }
}
</script>

<style lang="scss" scoped>
.Login{
  position: relative;
  .logo{
    width: .7rem;
    height: .4rem;
    margin: .5rem auto 0;
    padding: .15rem 0;
    img{
      width: .7rem;
      height: .4rem;
    }
  }
  .from{
    padding: .66rem .32rem .3rem .33rem;
    .input{
      width: 100%;
      height: .42rem;
      margin-top: .1rem;
      outline: none;
      position: relative;
      .left_icon{
        width: .16rem;
        height: .16rem;
        margin: .12rem 0;
        float: left;
      }
      input{
        width: 90%;
        height: .16rem;
        padding: .12rem 0;
        outline: none;
        border: none;
        position: absolute;
        left: .3rem;
      }
      input::-webkit-input-placeholder {
        line-height: 1;
          color: #ccc;
          font-size: .15rem;
          text-align: left;
      }
      .right_icon{
        width: .42rem;
        height: .42rem;
        text-align: center;
        line-height: .42rem;
        float: right;
        position: relative;
        z-index: 1;
        .clear_icon{
          width: .42rem;
          height: .42rem;
          img{
            width: .14rem;
            height: .14rem;
          }
        }
        .block_icon{
          width: .42rem;
          height: .42rem;
          img{
            width: .14rem;
          }
          .fill{
            transform: rotate(90deg)
          }
        }
      }
      .eyes_icon{
        width: .42rem;
        height: .42rem;
      }
      .list{
        width: 100%;
        max-height: 1.52rem;
        overflow: hidden;
        background-color: #fff;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
        position: absolute;
        left: 0;
        top: .42rem;
        z-index: 10;
        p{
          margin: .09rem 0;
          padding: 0 .3rem;
          text-align: left;
          font-size: .16rem;
          color: #333333;
          line-height: .16rem;
        }
      }
      &::after{
        content: "";
        width: 100%;
        height: 1px;
        background-color: #ccc;
        transform: scaleY(.5);
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
  }
  .button{
    margin: 0 auto;
    width: 3.11rem;
    height: .44rem;
    line-height: .44rem;
    outline: none;
    border: none;
    border-radius: 4px;
    font-size: .16rem;
    background-color: #D33;
    color: #fff;
    opacity: .5;
  }
  .active{
    opacity: 1;
  }
  .forgetPwd{
    font-family: PingFangSC-Regular;
    padding: .15rem .32rem;
    font-size: .13rem;
    text-align: right;
    color: #999;
    line-height: .13rem;
  }
  .immediatelyRegister{
    font-family: PingFangSC-Regular;
    font-size: .13rem;
    color: #D33;
    line-height: .13rem;
    margin-top: 1.19rem;
    >img{
      width: .05rem;
      height: .1rem;
      vertical-align: middle;
      padding: .02rem 0;
      margin-left: .095rem;
    }
  }
}

</style>

